<template>
	<view class="layout-container">
		<view class="layout-top"><slot a="1" :ooo="userName" name="abctop" /></view>
		<view class="layout-center"><slot name="abccenter"/></view>
		<view class="layout-bottom"><slot name="abcbottom"/></view>
	</view>
</template>

<!-- 
	slot和props的区别?
	props是绑定在自定义组件上的属性, 可以传递数据
	slot是传递结构, 把结构标签渲染在子组件指定位置
 -->

<script>
	export default {
		name:"Layout",
		data() {
			return {
				userName: ''
			};
		},
		created() {
			//发送请求,获取用户信息
			this.userName = 'cdd123456super'
		}
	}
</script>

<style lang="scss">
.layout-container{
	.layout-top{
		background-color: darkturquoise;
	}
	
	.layout-center{
		background-color: brown;
	}
	
	.layout-bottom{
		background-color: blueviolet;
	}
}
</style>